<template>
  <div class="item" @click="$router.push(`/detail?goodsId=${item.goods_id}`)">
    <div class="left">
        <img :src="item.goods_image">
    </div>
    <div class="right">
        <p>{{item.goods_name}}</p>
        <p>已售{{item.goods_sales}}</p>
        <p>
            <span>{{item.goods_price_min}}</span>
            <span>{{item.line_price_max}}</span>
        </p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsItem',
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }

}
</script>

<style lang="less" scoped>
    .item {
        width: 100%;
        height: 140px;
        margin-bottom: 6px;
        padding: 10px;
        box-sizing: border-box;
        background: #fff;
        line-height: 1.6;

    .left {
        float: left;
        width: 140px;
        height: 120px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .right{
        float: right;
        width: 200px;
    }

    p:first-child {
        line-height: 1.3;
        white-space: normal;
        color: #484848;
        font-size: 13px;
        display: -webkit-box;  /* 兼容旧版浏览器 */
        -webkit-line-clamp: 2;   /* 显示两行 */
        -webkit-box-orient: vertical;    /* 子元素在垂直方向排列 */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    p:nth-child(2){
        color: #999;
        font-size: 12px;
    }

    p:last-child {
        span:first-child {
            margin-right: 8px;
            color: #f03c3c;
            font-size: 15px;
        }

        span:last-child {
            color: #999;
            text-decoration: line-through;
        }
    }
    }
</style>
